<template>
<div class="free">


    <div class="btn1">
        <div>公益名称</div>
        <el-input style="width: 200px;margin-left: 10px;" v-model="input" placeholder="请输入公益名称"></el-input>
        <!-- 搜索按钮 -->
        <el-button @click="searchByName()" style="margin-left: 20px;" type="primary">搜索</el-button>
    </div>
    <!--        新增小区    -->
    <div class="addBtn">
        <el-button type="text" @click="dialogFormVisible = true">新增公益</el-button>

        <el-dialog title="新增公益" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="公益标题" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="公益封面" :label-width="formLabelWidth">

                    <el-upload
                            action="http://localhost:8080/free/upload"
                            list-type="picture-card"
                            :on-success="uploadImg"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="简介" :label-width="formLabelWidth">
                    form.text     <el-input v-model="form.simplyintroduce" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="详情" :label-width="formLabelWidth">
                    <el-input v-model="form.text" autocomplete="off"></el-input>
                </el-form-item>



            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFree">确 定</el-button>
            </div>
        </el-dialog>
    </div>

<!--//编辑公益表格-->
    <el-dialog title="新增公益" :visible.sync="dialogFormVisible1">
        <el-form :model="form1">
            <el-form-item label="公益标题" :label-width="formLabelWidth">
                <el-input v-model="form1.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公益封面" :label-width="formLabelWidth">

                <el-upload
                        action="http://localhost:8080/free/upload"
                        list-type="picture-card"
                        :on-success="uploadImg"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible1">
                    <img width="100%" :src="dialogImageUrl1" alt="">
                </el-dialog>
            </el-form-item>

            <el-form-item label="简介" :label-width="formLabelWidth">
                <el-input v-model="form1.simplyintroduce" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="详情" :label-width="formLabelWidth">
                <el-input v-model="form1.text" autocomplete="off"></el-input>
            </el-form-item>



        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="updateFree()">确 定</el-button>
        </div>
    </el-dialog>



    <!-- 表格 -->
    <el-table :cell-style="cellStyle" :header-cell-style="headerStyle" ref="multipleTable" :data="tableData"
              tooltip-effect="dark" style="width: 100%" @selection-change="selectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="ID" width="100">
            <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="name" label="标题" width="200">
        </el-table-column>
        <el-table-column prop="picture" label="图片" width="350">
            <template slot-scope="scope">
                <img :src="scope.row.picture" alt="图片" style="width: 100px; height: auto;"/>
            </template>
        </el-table-column>
        <el-table-column prop="simplyintroduce" label="简介" width="350">
        </el-table-column>
        <el-table-column prop="text" label="详情" width="300">
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" width="300">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
                <el-button @click="searchMessageById(scope.$index)" type="text" size="small" >编辑公益</el-button>

                    <el-button slot="reference" type="text" size="small"  @click="remove(scope.$index)" >删除公益</el-button>

            </template>
        </el-table-column>
    </el-table>




    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage2"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>





</div>



</template>

<script>
    export default {
        name: "FreeComponent",

        data() {
            return {
                //分页
                currentPage2:1,
                pageNum: 1,
                pageSize:5,

                dialogFormVisible1:false,
                tableData: [],
                input: "",
                dialogFormVisible: false,
                form: {
                    createtime: "",

                    simplyintroduce: "",
                    name: "",
                    text: ""
                },

                form1: {
                    createtime: "",
id:"",
                    simplyintroduce: "",
                    name: "",
                    text: ""
                },
                dialogImageUrl1: '',
                dialogVisible1: false,
                disabled1: false,
                //    图像
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
            }
        },
        methods: {

            //分页
            handleSizeChange(val) {
                this.pageSize= val;
                this.axios.get("/free/findAllFree",{
                    params: {
                        pageNum:this.currentPage2,
                        pageSize:this.pageSize,
                    },
                }).then((res) => {
                    this.tableData = res.data.data

                })
            },
            handleCurrentChange(val) {
                this.currentPage2=val;
                this.axios.get("/free/findAllFree",{
                    params: {
                        pageNum:this.currentPage2,
                        pageSize:this.pageSize,
                    },
                }).then((res) => {
                    this.tableData = res.data.data

                })
            },



            searchMessageById(index){
                this.dialogFormVisible1=true
                this.form1.name=this.tableData[index].name
                this.form1.simplyintroduce = this.tableData[index].simplyintroduce
                this.form1.text = this.tableData[index].text
this.form1.id=this.tableData[index].id
            },
            //修改公益信息
            updateFree(){
                this.dialogFormVisible1=false
                this.axios.post("/free/updateFree",{
                    id:  this.form1.id,
                    name:    this.form1.name,
                    simplyintroduce:  this.form1.simplyintroduce,
                   text: this.form1.text




                }). this.axios.get("/free/findAllFree",{
                    params: {
                        pageNum:this.currentPage2,
                        pageSize:this.pageSize,
                    },
                }).then((res) => {
                    this.tableData = res.data.data

                })
            },

            //图像
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            uploadImg(r){
                console.log(r.data);
                this.tableData.picture="http://localhost:8080/free/down?filename="+r.data;
                console.log(this.tableData.picture)
            },


            //添加公益
            addFree() {
                this.dialogFormVisible = false
                this.axios.post("/free/insertFree",  {


                      createtime: "",
                        picture: this.tableData.picture,
                        simplyintroduce: this.form.simplyintroduce,
                        name: this.form.name,
                        text: this.form.text

                }).then((res) => {
                    console.log(res.data.data)
                    this.tableData = res.data.data

                }). this.axios.get("/free/findAllFree",{
                    params: {
                        pageNum:this.currentPage2,
                        pageSize:this.pageSize,
                    },
                }).then((res) => {
                    this.tableData = res.data.data

                })
            },
            // 修改表格表头格式
            headerStyle() {
                return {
                    background: '#0b8bff',
                    color: 'white',
                    'text-align': 'center'
                }
            },
            handleClick(row) {
                console.log(row);
            },
            //搜索
            searchByName() {
                this.axios.get("/free/selectFreeLike", {
                    params: {
                        name: this.input
                    }
                }).then((res) => {
                    this.tableData = res.data.data
                }). this.axios.get("/free/findAllFree",{
                    params: {
                        pageNum:this.currentPage2,
                        pageSize:this.pageSize,
                    },
                }).then((res) => {
                    this.tableData = res.data.data

                })
            },
            //    删除
            remove(index) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.delete("/free/delFree", {
                        params: {
                            id: this.tableData[index].id
                        }
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                }). this.axios.get("/free/findAllFree",{
                    params: {
                        pageNum:this.currentPage2,
                        pageSize:this.pageSize,
                    },
                }).then((res) => {
                    this.tableData = res.data.data

                })
            },
        },

            created() {
                this.axios.get("/free/findAllFree",{
                    params: {
                        pageNum:this.currentPage2,
                        pageSize:this.pageSize,
                    },
                }).then((res) => {
                    this.tableData = res.data.data

                })


            }

    }
</script>

<style scoped>
    el-table{
        margin: 10px auto;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>